<script lang="ts" setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import webStore from '@/store'
import { getChampionList } from '@/assets/apis/champion'
import type { championListType } from '@/store/types'
import SearchBar from '@/components/searchBar/index.vue'
import TabBar from '@/components/tabBar/index.vue'
import globalConfig from '@/config'

const webStoreSetup = webStore(),
	{ championList } = storeToRefs(webStoreSetup)

getChampionList({ hl: 'zh_CN' }).then(value => {
	championList.value = value as championListType[]
	console.log('championList.value  :>>', championList.value)
})

const currentTab = ref<string>()
</script>

<template>
	<el-container direction="vertical">
		<el-header class="flex">
			<SearchBar shape="square" />
		</el-header>

		<el-container direction="horizon" class="mt-5">
			<el-aside width="380px" class="bg-white rounded-xl p-2">
				<TabBar :tab-list="globalConfig.branch" />
			</el-aside>
			<el-main class="bg-white ml-4 rounded-xl"> main </el-main>
		</el-container>
	</el-container>
</template>

<style scoped lang="scss">
@import './style.scss';
</style>
